import { useState, useEffect, useRef } from "react";
import "./Home.css";
import { useTranslation } from "react-i18next";
import HeaderA from "../../images/ceil-day.png";
import HeaderB from "../../images/ceil.png";
import MidderA from "../../images/indexLightBackground.png";
import MidderB from "../../images/bg-day.png";
import FloorA from "../../images/floor-day.png";
import FloorB from "../../images/floor.png";
import BordA from "../../images/border-day.png";
import BordB from "../../images/border.png";
import BallA from "../../images/speaking.jpeg";
import BallB from "../../images/speeching.gif";
import QuestionB from "../../images/answer-icon.svg";
import QuestionA from "../../images/answer-model.svg";
import SpeakB from "../../images/chat-model-active.svg";
import SpeakA from "../../images/chat-model.svg";
import Dark from "../../images/night-model.svg";
import Light from "../../images/day-model.svg";
import Clock from "../../images/notice.gif";
import { Button, Input } from "antd";
// 引入3D模型
import Three from "../Three/Three";
// 引入弹幕插件
import Danmaku from "rc-danmaku";
import { useNavigate } from "react-router-dom";
// 视频文件路径
const video = [
  "https://www.w3school.com.cn/i/movie.mp4",
  "https://video.699pic.com/videos/58/55/67/a_Dxes0HcEgdqv1597585567_10s.mp4",
];

function Home() {
  const navigate = useNavigate();
  const { t, i18n } = useTranslation();
  // 使用 useState 钩子来管理主题状态
  const [state, setState] = useState(true);
  // 使用 useState 钩子来管理呼叫AI状态
  const [callAI, setCallAI] = useState(true);
  // 使用 useState 钩子来管理右下角状态
  const [rightButtonA, setRightButtonA] = useState(true);
  const [rightButtonB, setRightButtonB] = useState(true);
  // 弹幕状态
  const [DanmakuText, setDanmakuText] = useState("");
  // 弹幕暂停和播放状态
  const [Stop, setStop] = useState(true);
  // 生成随机视频索引
  const [videoIndex, setVideoIndex] = useState(
    Math.floor(Math.random() * video.length)
  );
  // 切换主题的点击事件函数
  const Switch = () => {
    setState(!state);
  };
  // 切换视频的点击事件函数
  const VideoSwitch = () => {
    // 切换下一个视频
    setVideoIndex((videoIndex + 1) % video.length);
  };
  const danmakuInsRef = useRef<Danmaku | null>(null);
  // 弹幕插件初始化
  useEffect(() => {
    const danmakuIns = new Danmaku(".danmaku-wrapper");
    danmakuInsRef.current = danmakuIns;
  }, []);
  // 弹幕发送事件
  const handleSendDanmaku = () => {
    if (danmakuInsRef.current && DanmakuText) {
      danmakuInsRef.current.push(DanmakuText, {
        color: "orange",
      });
    }
    // 清空输入框
    setDanmakuText("");
  };
  // 弹幕暂停播放继续播放
  const handleSendDanmakuStop = () => {
    if (danmakuInsRef.current) {
      if (Stop) {
        danmakuInsRef.current.pause();
      } else {
        danmakuInsRef.current.resume();
      }
      setStop(!Stop);
    }
  };

  // 是否拖拽的状态
  const [isDragging, setIsDragging] = useState(false);
  // 鼠标按下时的位置
  const [startX, setStartX] = useState(0);
  const [startY, setStartY] = useState(0);
  // 移动的偏移量
  const [offsetX, setOffsetX] = useState(0);
  const [offsetY, setOffsetY] = useState(0);
  const dragRef = useRef(null);

  // 鼠标按下事件
  const handleMouseDown = (e: any) => {
    setIsDragging(true);
    setStartX(e.clientX);
    setStartY(e.clientY);
    setOffsetX(parseFloat(getComputedStyle(dragRef.current!).left) || 0);
    setOffsetY(parseFloat(getComputedStyle(dragRef.current!).top) || 0);
  };

  // 鼠标移动事件
  const handleMouseMove = (e: MouseEvent) => {
    if (isDragging && dragRef.current) {
      // 移动的距离
      const dx = e.clientX - startX;
      const dy = e.clientY - startY;
      // 新的位置
      let newX = offsetX + dx;
      let newY = offsetY + dy;

      // 盒子的宽度和高度
      const boxWidth = dragRef.current.offsetWidth;
      const boxHeight = dragRef.current.offsetHeight;

      // 屏幕的宽度和高度
      const screenWidth = window.innerWidth;
      const screenHeight = window.innerHeight;

      // 不让出边界
      if (newX < 0) {
        newX = 0;
      } else if (newX > screenWidth - boxWidth) {
        newX = screenWidth - boxWidth;
      }

      if (newY < 0) {
        newY = 0;
      } else if (newY > screenHeight - boxHeight) {
        newY = screenHeight - boxHeight;
      }

      dragRef.current.style.left = `${newX}px`;
      dragRef.current.style.top = `${newY}px`;
    }
  };
  // 鼠标松开事件
  const handleMouseUp = () => {
    setIsDragging(false);
  };
  // 监听鼠标移动和松开事件
  useEffect(() => {
    if (isDragging) {
      document.addEventListener("mousemove", handleMouseMove);
      document.addEventListener("mouseup", handleMouseUp);
    } else {
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
    }
    return () => {
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
    };
  }, [isDragging]);

  return (
    <div className="Home">
      {/* 北京八维信息集团 */}
      <div className="Home-Title">
        <img
          style={{ width: "100%", height: "100%" }}
          src={state ? HeaderA : HeaderB}
        />
        {/* 语言切换按钮 */}
        <Button
          className="language"
          color="primary"
          variant="outlined"
          onClick={() =>
            i18n.changeLanguage(i18n.language === "zh" ? "en" : "zh")
          }
        >
          {t("language")}
        </Button>
        {/* 进入3D展馆 */}
        <Button
          onClick={() => navigate("/Show")}
          color="primary"
          variant="outlined"
          className="Home-Title-Room"
        >
          {t("exhibition hall")}
        </Button>
        {/* 切换主题的按钮 */}
        <Button
          color="primary"
          variant="outlined"
          className="Home-Title-Button"
          onClick={Switch}
        >
          {t("themes")}
        </Button>
      </div>

      {/* 中间背景图 */}
      <div className="Home-Content">
        <img
          style={{ width: "100%", height: "100%" }}
          src={state ? MidderA : MidderB}
        />
        {/* 带个小铃铛 */}
        <div className="Home-Content-Clock">
          <div className="Home-Content-Clock-Text">{t("xw")}</div>
          <img className="Home-Content-Clock-Img" src={Clock} alt="" />
        </div>
        {/* 带数字人和视频的盒子 */}
        <div className="Home-Content-Bord">
          {/* 左边的数字人 */}
          <div className="Home-Content-Bord-Left">
            {/* 拖拽的小盒子 */}
            <div
              className="Home-Content-Bord-Left-drag"
              ref={dragRef}
              onMouseDown={handleMouseDown}
            ></div>
            {/* 数字人 */}
            <Three />
          </div>
          {/* 右边的视频 */}
          <div className="Home-Content-Bord-Right">
            {/* 视频外的边框 */}
            <img
              className="Home-Content-Bord-Right-Img"
              src={state ? BordA : BordB}
            />
            {/* 视频 */}
            <video
              className="Home-Content-Bord-Right-Video"
              // 播放控制条
              controls
              // 加载完自动播放
              autoPlay
              // 静音播放
              muted
              // 循环播放
              loop
              src={video[videoIndex]}
            ></video>
            {/* 弹幕插件 */}
            <div className="Danmaku-plugin">
              <div
                className="danmaku-wrapper"
                style={{
                  width: "97%",
                  marginLeft: "2%",
                  height: "70%",
                  backgroundColor: "#ffffff00",
                }}
              />
              {/* 弹幕输入框 */}
              <Input
                value={DanmakuText}
                // 修正 onChange 事件
                onChange={(e) => setDanmakuText(e.target.value)}
                className="danmaku-input"
                placeholder="请输入弹幕"
              ></Input>
              {/* 弹幕发送按钮 */}
              <Button className="danmaku-button" onClick={handleSendDanmaku}>
                {t("send")}
              </Button>
              {/* 弹幕暂停和播放按钮 */}
              <Button className="danmaku-Stop" onClick={handleSendDanmakuStop}>
                {Stop ? t("stop") : t("continue")}
              </Button>
              {/* 视频切换按钮 */}
              <Button className="Video-switch" onClick={VideoSwitch}>
                {Stop ? t("switch") : t("switch")}
              </Button>
            </div>
          </div>
        </div>
      </div>
      {/* 底部Title */}
      <div className="Home-Floor">
        <img
          style={{ width: "100%", height: "100%" }}
          src={state ? FloorA : FloorB}
        />
        {/* /* 底部唤醒AI的东西 */}
        <img
          className="Home-Floor-Ball"
          onClick={() => setCallAI(!callAI)}
          src={callAI ? BallA : BallB}
        />
        {/* 右下的按钮 */}
        <div className="Home-Floor-Button">
          <img
            onClick={() => setRightButtonA(!rightButtonA)}
            src={rightButtonA ? QuestionA : QuestionB}
            alt=""
          />
          <img
            onClick={() => setRightButtonB(!rightButtonB)}
            src={rightButtonB ? SpeakA : SpeakB}
            alt=""
          />
          <img onClick={Switch} src={state ? Dark : Light} />
        </div>
      </div>
    </div>
  );
}

export default Home;
